import React from 'react';
import { Button } from 'antd';
import { connect, useDispatch } from 'react-redux';
import reduxStore from '../../store/reduxStore';

function ReduxChil(props) {
  /* 获取 dispatch 函数引用 */
  const dispatch = useDispatch();
  return (
    <div>
      <pre>
        <h3>ReduxChil 组件</h3>
        reduxStore 名称: {reduxStore.getState().nameSpace} --- count: {reduxStore.getState().count}
      </pre>
      <Button
        onClick={() => {
          props.add();
        }}
      >
        {' '}
        数据加 +10{' '}
      </Button>
      <Button
        type='primary'
        danger
        onClick={() => {
          // console.log(props);
          dispatch({
            type: 'INCREASE'
          });
        }}
      >
        修改 reduxStore 中的值 减
      </Button>
    </div>
  );
}

/* redux 数据管理 store */
const mapStateToProps = state => {
  // console.log('state ==========?>?>?>?>?>', state);
  return {
    reduxStore: state
  };
};
/* redux 数据修改 分发dispatch */
const mapDispatchToProps = dispatch => ({
  add() {
    dispatch({
      type: 'DECREASE',
      count: 10
    });
  }
});

/* 使用 connect 包裹高阶函数 动态修改数据 */
export default connect(mapStateToProps, mapDispatchToProps)(ReduxChil);
